Tutorial on model-driven development using Flash Builder 4 and LiveCycle DS 3

Updated for Flash Builder 4 release version and LiveCycle Data Services ES2 (LiveCycle DS 3) 🙂

In this article we will see how we can do model-driven development using Flash Builder 4 and LiveCycle Data Services ES2. We will create a Flex application to perform CRUD operations on a database table without writing code.

Install LCDS 3

Download LiveCycle Data Services 3 from this URL http://www.adobe.com/go/trylivecycle_dataservices. You will be downloading a file named lcds31-win.exe/lcds31-mac.zip, execute this file to install. I have installed LCDS 3 with Tomcat to C:\lcds3

Set up Adobe Application Modeling Plug-in (Formerly Fiber modeler plug-in)

Download Adobe Application Modeling plug-in from this URL Download Adobe Application Modeling Plug-in (20 MB. For Flash Builder 4 release version click on “For Eclipse 3.5 Download”). You will be downloading file named Adobe_Application_Modeling_plugin_v102_eclipse35.zip, extract the contents of the zip file to a folder called Adobe_Application_Modeling_plugin_v102_eclipse35. Copy the files under Adobe_Application_Modeling_plugin_v102_eclipse35/plugins folder into C:\Program Files\Adobe\Adobe Flash Builder\plugins.

Create sample database required

You can download the SQL file for the table used in this sample at this URL http://sujitreddyg.com/fb4articles/beta2/customers.sql.txt

Setting up data source

We need to expose databases as data sources. Fiber modeler plugin will use the data sources configured on the web server to get details of the tables in the database. In this sample, we will use lcds web application and the database created above. Add data source pointing to the database by modifying C:\lcds3\tomcat\conf\Catalina\localhost\lcds.xml as shown below. Make sure you have MySQL Connector/J in your tomcat lib folder.

<Context privileged=”true” antiResourceLocking=”false” antiJARLocking=”false” reloadable=”true”>

<Transaction factory=”org.objectweb.jotm.UserTransactionFactory” jotm.timeout=”60″/>

<Resource name=”jdbc/test” auth=”Container”

type=”javax.sql.DataSource”

username=”UserName”

password=”Password”

driverClassName=”com.mysql.jdbc.Driver”

url=”jdbc:mysql://localhost:3306/test?autoReconnect=true”/>

</Context>

Enabling RDSDispatchServlet

Flash Builder and Fiber Modeler plugin use the RDSDispatchServlet (part of LCDS) to retrieve information like data source, destinations, etc. by default the RDSDispatchServlet is commented out in web.xml. Open C:\lcds3\tomcat\webapps\lcds\WEB-INF\web.xml using a text editor and remove comment around RDSDispatchServlet Servlet definition and the URL mapping as shown below. Also set the useAppserverSecurity parameter value to “false” as shown below.

<servlet>

<servlet-name>RDSDispatchServlet</servlet-name>

<display-name>RDSDispatchServlet</display-name>

<servlet-class>flex.rds.server.servlet.FrontEndServlet</servlet-class>

<init-param>

<param-name>useAppserverSecurity</param-name>

<param-value>false</param-value>

</init-param>

<load-on-startup>10</load-on-startup>

</servlet>

<servlet-mapping id=”RDS_DISPATCH_MAPPING”>

<servlet-name>RDSDispatchServlet</servlet-name>

<url-pattern>/CFIDE/main/ide.cfm</url-pattern>

</servlet-mapping>

Start LCDS server

Start LCDS server from the start menu, start -> All Programs -> Adobe -> LiveCycle Data Services ES 3.0 -> Start LiveCycle Data Services Server

Please make sure both the database and the server are started.

We have everything ready to develop a Flex application using Flash Builder 4, Adobe Application Modeling plug-in and LCDS 3.

Create a Flex project

Start Flash Builder 4 from the start menu, start -> All Programs -> Adobe -> Adobe Flash Builder

Create a Flex project from the file menu as shown in the image below.

You will see a window launched with options to fill project properties as shown in the image below. Fill project properties as shown in the image below.

In this screen:

1. Set project name to MDDSample
2. Let the Application type be Web
3. Use default Flex SDK (Flex 4.0)
4. Set the Application server type to J2EE
5. Select Use remote object access service check box
6. Select LiveCycle Data Services ES
7. Click next to continue

Now we need to set the server properties, you will see a screen with options to set the server properties as shown in the image below.

In this screen:

1. Set the Root folder to c:\lcds3\tomcat\webapps\lcds
2. Set the Root URL to http://localhost:8400/lcds
3. Set the Context root to /lcds
4. Leave the Output folder to default, which is on the server
5. Click finish to continue

Flash Builder will create a project with a default application file. Now let’s build the model using Fiber Modeler Plugin. For the modeler plugin to retrieve data sources we configured, we need to configure RDS Server settings in Flash Builder.

Configure RDS Server

Select preferences from window menu as shown in the image below.

In the preferences window, you will find RDS configuration panel under Adobe -> RDS Configuration as shown in the image below.

Configure RDS Server for lcds web application as shown in the image below.

In this screen:

1. 1. Set the description to LCDS (localhost)
2. Set the host name to 127.0.0.1
3. Set the port number to 8400
4. Set the Context root to lcds
5. Leave the User name and Password blank under the Security Information section
6. Click on Test Connection to check if everything is properly configured
7. Click OK to continue

We configured RDS, let’s create a model.

Creating model using Fiber Modeler plugin

Right click on the MDDSample Flex project and create new Data Model file as shown in the image below. If you cannot view Data Model in the options, you can select “other” and find Data Model under the Data Modeling as shown in the image below.

Click Next to continue. Window with option to fill model properties will be launched as shown in the image below.

In this screen, set the File name to Customer.fml and click on Next to continue.

In this screen, since we want to create model from a table in the database select From a database. Click Next to continue. Next screen will give you option to select the RDS server configured in previous steps and to view the data sources available.

In this step, we will select the database table from which the model has to be created.

In this screen:

1. Set the RDS Server to LCDS (localhost), one we created in previous steps
2. Data sources available will be listed down. Select java:/comp/env/jdbc/test
3. Tables available in the data source will be listed, select customers table
4. Click on Finish to continue

Fiber Modeler Plugin will create Customer.fml based on the Customers table. Adobe Data Model perspective will launched as shown in the image below.

In this screen click Yes to launch Adobe Data Model perspective. You will see Customer entity represented graphically as shown in the image below.

Let’s deploy this model to the server. Right click on the Customer.fml and select Deploy Data Model to LCDS Server as shown in the image above. Window with deployment options will be launched as shown in the image below.

In this screen:

1. Set the RDS Server to LCDS (localhost)
2. Set the model name to Customer
3. Set the Database Tables to Unchanged
4. Click on Finish to continue

Fiber Modeler Plugin deploys the Customer model to the server. LCDS 3 will create required assembler and also create a data management destination. All we have to do now is to see how we can consume the service and create a Flex application. With Flash Builder 4 this is very simple, let’s see how Data centric Development (DCD) features in Flash Builder 4 lets us easily consume data management services and bind them to UI controls.

Consuming data management services from Flash Builder 4

Switch to Flash perspective and Select MDDSample.mxml. You can switch perspective from right hand side top corner. Select the Data/Services panel also called services explorer as shown in the image below.

Now that we have our model deployed, we will consume the data in the Customers table and bind the data to a UI control. Click on the Connect to Data/Service link highlighted in the image above.

You will see a window launched with options to select the type of service as shown in the image below.

In this screen, select LCDS and click on Next to continue. Flash Builder will display a window asking for RDS credentials. Since we turned off security for our RDSServlet by setting the “useAppserverSecurity” parameter to “false” in the web.xml, select “No password required” and click on OK to continue.

Now Flash Builder will retrieve all the Remoting and Data Management destinations exposed by the web application and displays as shown in the image below.

You can see that a destination named Customer.Customers is created whose associated source class is fiber.data.assemblers.FiberAssembler and the service type is data-service. Select the destination and click on Finish to continue.

Flash Builder will generate all code required to consume the service selected and will list the CustomersService in the services explorer as shown in the image below.

You can also see that the return types are properly set. Now that we have the service created, let’s bind the data to a UI control. Switch to design view as shown in the image below.

In this screen:

1. Set the layout of the Application to spark.layouts.VerticalLayout
2. Drag and drop a DataGrid on to the design view
3. Set the editable property of the DataGrid to true
4. Set the width of the DataGrid to 100%

Now let’s bind the data to DataGrid.

In this screen:

1. Select the DataGrid
2. Right click on the DataGrid
3. Select Bind To Data

You will a window launched with options to select the service.

In this screen:

1. Select New service call
2. Set the Service to CustomersService
3. Set the Operation to getAll(): Customers[]
4. Set the Data provider to Customers[]
5. Click on OK to continue

You will see that the DataGrid will change its columns to reflect the properties of the Customers entity. Save the application and run the application. Application will launch in the browser. You can observe the application sending request to the server and displaying the response in the DataGrid as shown in the image below.

Let’s enable auto commit so that this will be a complete application. Switch to code view and add this line of code to enable auto commit as shown in the image below. Also set the DataGrid editable to true.

customersService.serviceControl.autoCommit = true;

Save and run the application. You can edit the data in the DataGrid and just press enter key, the data will automatically be committed in the database. Refresh the application to confirm.

More articles on how to use Flash Builder 4 are available at this URL https://sujitreddyg.wordpress.com/flash-builder-4/

We created a complete Flex application using Flash Builder 4 and LiveCycle Data Services 3 to perform operations on the data in the database in few minutes. Now that’s Rapid Application Development.

LCDS 3 Rocks 🙂